<style lang="less" scoped>

</style>

<template>
  <div>
    <myInput  v-show="showInput"></myInput>
    <myShowInput  v-show="showInputData"></myShowInput>
    <myTable  v-show="showTable"></myTable>
    <myDetail  v-show="showDetail"></myDetail>
    <myCheckDetail v-show="showCheckDetail"></myCheckDetail>
  </div>
</template>

<script>
import myTable from "../components/table";
import myDetail from "../components/detail";
import myInput from "../components/input";
import myShowInput from "../components/show_input";
import myCheckDetail from '../components/check_detail';
export default {
  data() {
    return {
      showTable: false,
      showDetail: false,
      showCheckDetail:false,
      showInput: false,
      showInputData: false,
      
    };
  },
  components: {
    myTable,
    myDetail,
    myInput,
    myShowInput,
    myCheckDetail,
  },
  methods: {
    /* 
        确定组件的位置和是否显示
        className:String 组件的类名
        component: obj 存储在vuex中该组件的信息
    */
   getComponentsPostion(className,compontentName){
       let dom = document.querySelector(className);
       let left = compontentName.postion.x;
       let top = compontentName.postion.y;

      //  show = compontentName.use

       dom.style.left = left;
       dom.style.top = top;
       return compontentName.use;
   }
  },
  //生命周期 - 创建完成
  created() {},
  //DOM挂载完毕
  mounted() {
      this.showInput = this.getComponentsPostion('.input',this.$store.state.myInput);
      this.showInputData = this.getComponentsPostion('.show_input',this.$store.state.myShowInput);
      this.showTable = this.getComponentsPostion('.table',this.$store.state.myTable);
      this.showDetail = this.getComponentsPostion('.detail',this.$store.state.myDetail)
      this.showCheckDetail = this.getComponentsPostion('.check_detail',this.$store.state.myCheckDetail)
  },
};
</script>
